<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件分支</title>
</head>
<body>
<div id="yun9">
    <div v-if="type === 'A'">
        A
    </div>
    <div v-else-if="type === 'B'">
        B
    </div>
    <div v-else-if="type === 'C'">
        C
    </div>
    <div v-else>
        Not A/B/C
    </div>


    <!--v-if和v-show，当判断为true表示结果一样，当判断结果为false，show只是把display改为none，if彻底不加载

    -->
    <div v-show="show">
        当前show的值为true
    </div>

    <div v-if="show">
        我是if的展示
    </div>


</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: "#yun9",
        data: {
           type:"C",
            show:false
        }

    });
</script>
</body>
</html>